<#import "../home/masterTemplate.ftl" as layout />
<#include "../macros/utils.ftl" />
<#import "../macros/spring.ftl" as spring />

<#----><#include "/dumps/dump-util.ftl" />

<#assign scriptsObj>
	<#if isMobile()>

	<#else>
		require(["../js/modules/form", "../js/questions/questions"], function() {
	</#if>
		base.init();
		base.questions.init();

		$(".selectpicker ").selectpicker();
	<#if !isMobile()>
		});
	</#if>
</#assign>

<@layout.masterTemplate wtSection="" wtSubsection="" title="" bodycss="" wrappercss="bg" section="questions" subsection="" pagename="" color="" sectionIdx="2">

	<@backHeader "Add" "Questions" /> 
  <div class="col1-of-2">
  	<div class="frm comment-form cf" id="addQuestion" data-async="true" data-type="add">
  		<form action="<@spring.url '/questions/add_input/' />" method="POST">
  		  <div class="form-group">
  		  	<label for="description">description:</label>
  		  	<textarea class="form-control" id="description" name="description" placeHolder="description" rows="3" title="description" required="required" data-rules="maxlength:255"></textarea>
  		  </div>

       <div class="form-group ">
       	<label for="explanation">explanation:</label>
       	<textarea class="form-control" id="explanation" name="explanation" placeHolder="explanation" rows="3" title="explanation" required="required" data-rules="maxlength:255"></textarea>
       </div>

       <div class="form-group inline-block">
       	<label for="duration">duration:</label>
       	<input type="number"  placeHolder="seconds" class="form-control" id="duration" name="duration" title="duration"  maxlength="3" required="required" data-rules="number,maxlength:3"/>
       </div><br>

        <div class="form-group  inline-block visible">
          <label for="level" class="control-label input-group">please select a related topic:</label>
        	<select class="form-control topics selectpicker" data-live-search="true" name="topic" id="topic" title="topic" required="required">
             <#if getList(m_site.m_topicsList)?size gt 0>
          	   <#list getList(m_site.m_topicsList) as topic>
                  <option value="${topic.id}">${topic.title}</option>
               </#list>
             <#else>
               <option>No topics at this time.</option>
             </#if>
        	</select>
        </div><br>

        <div class="form-group inline-block">
        	<label for="points">total points:</label>
        	<input type="number" class="form-control" id="points" name="points" title="points" required="required" maxlength="3"  placeHolder="points" data-rules="number,maxlength:3"/>
        </div><br>

        <div class="btn-group form-group" data-toggle="buttons">
            <label for="level" class="control-label input-group">level:</label>
            <label class="btn btn-primary active">
              <input type="radio" name="level" value="1">easy
            </label>
            <label class="btn btn-primary">
              <input type="radio" name="level" value="2">medium
            </label>
            <label class="btn btn-primary">
              <input type="radio" name="level" value="3">hard
            </label>
       </div>

       <#if getList(m_site.m_topicsList)?size gt 0>
  		    <div class="cf confirm"><a class="btn btn-primary submit right" role="button">submit</a></div>
       <#else>
          <div class="alert alert-danger">You cannot create questions, please add topics.</div>
       </#if>

  		</form>
  	</div>
  </div>
  <div class="col2-of-2">
  </div>
	<#----><@dumper m_site "m_site" false true/>
</@layout.masterTemplate>